<script src="/static/js/iconfont.js"></script>
<!-- <link rel="stylesheet" href="/static/index/css/iconfont.css"> -->
<style>
    .nodeboard-position-base {
        z-index: 989;
        position: fixed;
        inset: auto auto 10px 20px;
        border-radius: 8px;
        box-shadow: 0 8px 40px 0 rgb(0 0 0 / 40%);
        margin-left: 0px;
        margin-top: 0px;
        background-color: #fff;
    }

    .nodeboard-top {
        height: 46px;
        line-height: 46px;
        font-size: 14px;
        background-color: #4E6EF2;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .nodeboard-top-3 {
        background: #5882ED url(http://sgoutong.baidu.com/embed/1641973463/asset/embed/css/pc/message/img/boardTop4.png) no-repeat;
        background-size: 100% 100%;
    }

    .head-title {
        float: left;
        font-size: 14px;
        color: #fff;
        margin-left: 12px;
        line-height: 46px;
        padding-left: 2px;
    }

    .nodeboard-close {
        display: block;
        float: right;
        height: 46px;
        width: 34px;
        cursor: pointer;
        background: transparent url(http://sgoutong.baidu.com/embed/1641973463/asset/embed/css/pc/message/img/nodeMin.png) no-repeat;
        _background: none;
        background-position: 0 center;
        background-size: 50%;
    }
    .back-to-table {
        /* display: none; */
    position: fixed;
    z-index: 900;
    bottom: 40px;
    left: -50px;
    text-decoration: none;
    background: #fff;
    font-size: 14px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    width: 50px;
    height: 50px;
    cursor: pointer;
    text-align: center;
    line-height: 51px;
    border-radius: 100%;
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
    box-shadow: 0px 0px 27px 0px rgb(0 0 0 / 5%);
    }

    .back-to-table.active {
    left: 25px;
}
    .back-to-table.lactive {
    left: -50px;
}
.back-to-table .fa {
    color: inherit;
    font-size: 18px;
}


.back-to-table:hover {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
}

.icon {
  width: 1.5em;
  height: 1.5em;
  vertical-align: -0.35em;
  fill: currentColor;
  overflow: hidden;
  color: #9E9E9E;
}

    .nodeboard-contain {
        color: #000;
        border-radius: 8px;
        background-color: #fff;
    }

    .nodeboard-text {
        zoom: 1;
        padding: 12px 0;
        display: block;
    }

    .nodeboard-company {
        font-size: 14px;
        background-color: transparent;
        color: #303133;
        word-break: break-all;
        line-height: 18px;
        margin: 0 8px 0 12px;
    }

    .nodeboard-link {
        background-color: transparent;
        color: #909399;
        height: 12px;
        word-break: break-all;
        line-height: 18px;
        margin: 0 8px 0 12px;
    }

    .nodeboard-set-content {
        width: 212px;
        height: 68px;
        margin: 12px auto 7px;
        _margin: 12px 0 7px -10px;
        padding: 5px 6px;
        resize: none;
        overflow: hidden;
        border: 1px solid #DCDFE6;
        background-color: #fff;
        text-align: left;
        _line-height: 12px;
        outline: 0;
        border-radius: 4px;
        font-size: 12px;
        line-height: 18px;
    }

    .nodeboard-name {
        height: 33px;
        width: 215px;
        line-height: 32px;
        margin: 8px auto 0;
        _margin: 8px 0 0 -10px;
        border: 1px solid #DCDFE6;
        position: relative;
        background-color: #fff;
        border-radius: 4px;
        font-size: 14px;
    }

    .nodeboard-icon {
        width: 35px;
        height: 30px;
        display: inline-block;
        text-align: center;
        background-color: #fff;
        vertical-align: top;
        border-right: 1px solid #fff;
        border-radius: 4px 0 0 4px;
    }

    .nodeName {
        background: #fff url(http://sgoutong.baidu.com/embed/1641973463/asset/embed/css/pc/message/img/user.png) no-repeat 9px center;
    }

    .nodeboard-input {
        margin: 0;
        width: 172px;
        height: 30px;
        line-height: 32px;
        _overflow: hidden;
        border: none;
        display: inline-block;
        outline: 0;
    }

    .nodePhone {
        background: #fff url(http://sgoutong.baidu.com/embed/1641973463/asset/embed/css/pc/message/img/nodephone.png) no-repeat 9px center;
    }

    .nodeboard-send {
        width: 218px;
        margin: 12px auto 0 10px;
        padding-bottom: 12px;
        _margin-left: 10px;
        overflow: hidden;
    }

    .nodeboard-send-btn {
        height: 32px;
        width: 64px;
        line-height: 32px;
        text-align: center;
        border-radius: 4px;
        font-size: 12px;
        color: #fff;
        cursor: pointer;
        background-color: #5882ED;
        float: right;
    }

    .nodeboard-success {
        display: block;
        height: 270px;
        background-color: #ededed;
    }

    .success-box {
        width: 120px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -60px;
        margin-top: -55px;
    }

    .success-icon {
        height: 72px;
        width: 80px;
        margin: 0 auto;
        background: #fff url(http://sgoutong.baidu.com/embed/1641973463/asset/embed/css/pc/message/img/bridge.png) no-repeat center center;
        background-color: transparent
    }

    .success-title {
        color: #333;
        font-size: 14px;
        text-align: center;
        margin-top: 10px;
    }

    .success-content {
        color: #333;
        text-align: center;
    }

    .sucess-close {
        height: 30px;
        width: 90px;
        color: #fff;
        margin: 20px auto 0;
        background-color: #4E6EF2;
        text-align: center;
        line-height: 32px;
        cursor: pointer;
    }

    .nodeboard-max {
        /* background: transparent url(http://sgoutong.baidu.com/embed/1641973463/asset/embed/css/pc/message/img/nodeMax.png) no-repeat; */
        /* _background: none;
        background-position: 0 center; */
    }
</style>

<div id="messageBoard">
    <div class="nodeboard-base nodeboard-position-base" style="width: 240px;">
        <div class="nodeboard-contain-base nodeboard-contain">
            <div id="nodeboard_top" class="nodeboard-top nodeboard-top-3" style="background-color: transparent;">
                <!-- <div class="head-title">留言板</div> -->
                <div class="nodeboard-close" id="nodeboard_close" data-type="min"></div>
                <!-- <i class=" fa fa-angle-up" id="nodeboard_close"></i> -->
            </div>
            <div id="back-to-table" class="back-to-table lactive">
                <!-- <i class="fa fa-angle-up"></i> -->
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-contact"></use>
                  </svg>
                  <!-- <span class="iconfont icon-contact"></span> -->
            </div>
            <div id="nodeboard_text" class="nodeboard-text">
                <p class="nodeboard-company">{$system.name ?? '北京赛亿科技有限公司'}</p>
                <p class="nodeboard-link">{$system.mobile_phone ?? 'xxx xxx xxxx'}</p>
            </div>
            <form id="nodeboard_form" autocomplete="off" class="board-form" action="" method="post"
                accept-charset="utf-8" style="display: inline;background-color: #ededed;">
                <div id="nodeboard_set" class="nodeboard-set" style="display: block;">
                    <div class="nb-nodeboard-content" style="position: relative;width: 216px;margin: 8px auto;">
                        <textarea id="nodeboard-set-content-js" name="content" data-ph="请在此输入留言内容，我们会尽快与您联系。（必填）"
                            placeholder="请在此输入留言内容，我们会尽快与您联系。（必填）"
                            class="nodeboard-set-content nodeboard-param"></textarea>
                    </div>
                    <div class="nodeboard-name">
                        <div class="nodeboard-icon nodeName"></div>
                        <input id="nodeboard_set_name" data-write="0" name="name" maxlength="30"
                            class="nodeboard-input nodeboard-param" type="text" data-ph="姓名" placeholder="姓名">
                    </div>
                    <div class="nodeboard-name" id="nodeboard_phone">
                        <div class="nodeboard-icon nodePhone"></div>
                        <input id="nodeboard_set_phone" data-write="1" name="phone" maxlength="20"
                            class="nodeboard-input nodeboard-param" type="text" data-ph="电话（必填）" placeholder="电话（必填）">
                        <span style="color: red;" id ="ecorr_msg"></span>
                        <input type="hidden" name="__token__" value="{:token()}" />
                    </div>
                </div>
            </form>
            <div class="nodeboard-success" id="nodeboard_success" style="display: none;">
                <div class="success-box">
                    <div class="success-icon"></div>
                    <div class="success-title" id="node_messagetitle">感谢留言</div>
                    <div class="success-content" id="nb_node_messagecontent">我们会尽快与您联系</div>
                    <div id="nodeboard_return" needverifycode="1" class="sucess-close">关闭</div>
                </div>
            </div>
            <div class="nodeboard-send" id="node_contain" style="display: block;">
                <div id="nodeboard_send" needverifycode="1" class="nodeboard-send-btn">发送</div>
            </div>
        </div>
    </div>
</div>

<script type='text/javascript'>
    jQuery(document).ready(function ($) {
        $("#nodeboard_send").click(function () {
            var name = $("#nodeboard_set_name").val();
            var phone = $("#nodeboard_set_phone").val();
            var content = $("#nodeboard-set-content-js").val();
            var token = $("input[name='__token__']").val();

            $.post('/message_board', {
                'name': name,
                'phone': phone,
                'content': content,
                '__token__': token
            }, function (res) {
                if (res.code == 1) {
                    $('#nodeboard_success').css('display', 'block');
                    $('#nodeboard_set').css('display', 'none');
                    $('#node_contain').css('display', 'none');
                } else {
                    $('#ecorr_msg').html(res.msg);
                }
            }, 'json')
        });

        $("#nodeboard_return").click(function () {
            $("#nodeboard_set_name").val("");
            $("#nodeboard_set_phone").val("");
            $("#nodeboard-set-content-js").val("");
            $("#ecorr_msg").html("");


            $('#nodeboard_success').css('display', 'none');
            $('#nodeboard_set').css('display', 'block');
            $('#node_contain').css('display', 'block');
            
        })

        $("#nodeboard_close").click(function () {
            $('#back-to-table').toggleClass('active');
            $('#back-to-table').toggleClass('lactive');
            $('#nodeboard_text').toggle();
            $('#nodeboard_set').toggle();
            $('#node_contain').toggle();
            // $('#back-to-table').toggle();
            $('#nodeboard_top').toggle();

        });
        $("#back-to-table").click(function () {
            $('#back-to-table').toggleClass('active');
            $('#back-to-table').toggleClass('lactive');
            $('#nodeboard_text').toggle();
            $('#nodeboard_set').toggle();
            $('#node_contain').toggle();
            // $('#back-to-table').toggle();
            $('#nodeboard_top').toggle();
        })
    })
</script>